<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #previewWrapper {
            position: relative;
        }

        #previewWrapper canvas {
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <input type="file" id="uploadFile"></input>
    <div id="previewWrapper">
        <img id="preview"></img>
    </div>

    <button id="btnZoomOut">放大</button> <button id="btnZoomIn">缩小</button> <button id="btnTransX">x方向平移</button>
    <button id="btnTransY">y方向平移</button>
    <button id="btnTransXInverse">x方向平移(负方向)</button>
    <button id="btnTransYInverse">y方向平移(负方向)</button>
    <button id="btnRotate">顺时针旋转</button> <button id="btnRotateInverse">逆时针旋转</button>
    <!--  F:/web/trans/20170914/bd.png  本地文件地址（file://）
        img src="http"协议的地址  img src  相当于浏览器向服务器发送一个get请求。
        
    1) 选择图片后，上传到服务器，然后再从服务器取得http地址   -formdata/multi-part
    2) 直接将图片显示在页面中

    type="file" 拿到，返回file对象---flie(类)----（基类）blob

    什么事blob  大型二进制格式对象  blob---生成一个临时url----给img赋值url--显示在页面上
    -->

    <script src="libs/jquery/dist/jquery.js"></script>
    <script src="fi/class.js"></script>
    <script src="fi/matrix.js"></script>
    <script>
        $("#uploadFile").on("change", function (e) {
            var f = $("#uploadFile").get(0).files[0];
            var url = window.URL.createObjectURL(f);//通过blob对象生成一个临时的url
            $("#preview").attr("src", url);
            $("#preview").on("load", function (e) {
                var width = this.width;
                var height = this.height;
                var cWidth = this.width / 3;
                var cHeight = this.height / 3;
                var jCanvas = $("<canvas></canvas>");
                jCanvas.insertAfter($("#preview"))
                jCanvas.attr("width", this.width);
                jCanvas.attr("height", this.height);
                var ctx = jCanvas.get(0).getContext("2d");//jCanvas.getContext("2d");
                var drawRect = function () {
                    ctx.save();
                    //ctx.translate(width / 2, height / 2)
                    ctx.beginPath();
                    //ctx.rect(-width / 2, -height / 2, width, height);
                    var bx = - cWidth / 2;
                    var by = - cHeight / 2;
                    //  ctx.rect(width/2-cWidth/2,height/2-cHeight/2,cWidth,cHeight)
                    //零和原则
                    ctx.moveTo(bx, by);
                    ctx.lineTo(bx, by + cHeight);
                    ctx.lineTo(bx + cWidth, by + cHeight);
                    ctx.lineTo(bx + cWidth, by);
                    ctx.lineTo(bx, by);
                    ctx.fillStyle = "rgba(0,0,0,0.5)";
                    ctx.fill();
                    ctx.restore();
                }
              

                var m = new Matrix();
                ctx.translate(width / 2, height / 2)
                drawRect();
                $("#btnZoomOut").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.scale(1.1, 1.1);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })

                $("#btnZoomIn").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.scale(0.9,0.9);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })

                $("#btnTransX").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.translate(10, 0);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })

                $("#btnTransY").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.translate(0, 10);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })


                $("#btnTransXInverse").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.translate(-10, 0);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })


                $("#btnTransYInverse").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.translate(0, -10);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })

                $("#btnRotate").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.rotate(Math.PI*0.1);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })


                
                $("#btnRotateInverse").on("click", function (e) {
                    ctx.clearRect(-width/2, -height/2, width, height)
                    ctx.save();
                    m.rotate(-Math.PI*0.1);
                    ctx.transform(m.a, m.b, m.c, m.d, m.tx, m.ty);
                    drawRect();
                    ctx.restore();
                })

                //  ctx.fillRect(0,0,width,height);
                // ctx.fillStyle = "#ffffff";
                //   console.log(width/2-cWidth/2);
                //   ctx.fillRect(width/2-cWidth/2,height/2-cHeight/2,cWidth,cHeight);

            })
        })
    </script>



</body>

</html>